<template>
    <div class="back">
      <div class="left-box">
        <div class="l-text">
          <img style="width: 50px; height: 50px;" src="../../src/assets/logo.png">
          <h3>后台管理</h3>
        </div>
        <el-row class="tac">
          <el-col :span="12">
            <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
                @open="handleOpen"
                @select="handleSelect"
                >
              <el-menu-item index="1" @click="$router.push('/back/world')">
                <i class="el-icon-menu"></i>
                <span slot="title">修改通知</span>
              </el-menu-item>
              <el-menu-item index="2" @click="$router.push('/back/userMsg')">
                <i class="el-icon-menu"></i>
                <span slot="title">审核信息</span>
              </el-menu-item>
            </el-menu>


          </el-col>
        </el-row>
      </div>
      <div class="right-box">
        <div class="r-top">
          <div class="user">
            <el-button @click="onupdatePassword" type="warning">修改密码</el-button>
          </div>
        </div>
        <div class="r-b">
          <router-view/>
<!--          <NewUser/>-->
        </div>
      </div>
      <el-dialog
          title="修改密码"
          :visible.sync="dialogVisible"
          width="30%"
          >
        <el-form
            :model="loginForm"
            :rules="loginRules"
            ref="loginForm"
            label-width="0px"
        >
          <el-form-item label="" prop="lodpassWord">
            <el-row>
              <el-col :span="2">
                <span class="el-icon-lock" style="color: black;"></span>
              </el-col>
              <el-col :span="22">
                <el-input
                    class="inps"
                    placeholder="旧密码"
                    v-model="loginForm.lodpassWord"
                ></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="" prop="newpassWord">
            <el-row>
              <el-col :span="2">
                <span class="el-icon-lock" style="color: black;"></span>
              </el-col>
              <el-col :span="22">
                <el-input
                    class="inps"
                    placeholder="新密码"
                    v-model="loginForm.newpassWord"
                ></el-input>
              </el-col>
            </el-row>
          </el-form-item>


        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updatePassword">确 定</el-button>
        </span>
      </el-dialog>
    </div>

</template>

<script>
import {UserMsgGetByid, UserMsgSaveOrUpdata} from "@/request/utils/user";

export default {
  name: "back",
  data() {
    return {
      loginForm:{
        lodpassWord: '',
        newpassWord: ''
      },
      loginRules: {
        lodpassWord: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
        newpassWord: [{ required: true, message: "请输入新密码", trigger: "blur" }],
      },
      userInfo: {},
      dialogVisible: false,
    }
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleCommand(){
      this.$router.push("/");
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },

    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    onupdatePassword(){
      this.dialogVisible = true
    },
    updatePassword(){
      UserMsgGetByid("1").then(res=>{
        if(res.data.idNumber!==this.loginForm.lodpassWord){
          this.$message.error("旧密码不对")
        }else {
          res.data.idNumber = this.loginForm.newpassWord;
          UserMsgSaveOrUpdata(res.data).then(res=>{
            this.$message({
              message: '修改成功',
              type: 'success',
              duration: 500,
              onClose: () => {
                localStorage.removeItem('user');
                this.$router.push("/login");
              }
            })
          })
        }
      })
    }
  },
  //生命周期 一 创建完成(可以访问当前this实例)
  created() {
    var storedData = localStorage.getItem('user');
    if (storedData) {
      storedData = JSON.parse(storedData);
      var currentTime = new Date().getTime();

      if (currentTime > storedData.expiration) {
        // 数据已过期，清除
        localStorage.removeItem('user');
        storedData = null;
      }
    }

// 使用数据
    if (storedData) {
      var value = storedData.value;
      // 进行其他操作
    }else {
      this.$router.push("/login");
    }
  },
  //生命周期 一 挂载完成(可以访问DOM元素)
  mounted() {

  },
  //生命周期 - 创建之前
  beforeCreate() {
  },
  //生命周期 - 挂载之前
  beforeMount() {
  },
  //生命周期 - 更新之前
  beforeUpdate() {
  },
  //生命周期 - 更新之后
  updated() {
  },
  //生命周期 - 销毁之前
  beforeDestroy() {
  },
  //生命周期 - 销毁完成
  destroyed() {
  },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {
  },
}
</script>

<style scoped lang="less">
  .back{
    display: flex;
    .left-box{
      width: 10%;
      height: 100vh;
      background: #565c63;

      .l-text{
        margin: 0 auto;
        padding: 0.769rem;
        box-sizing: border-box;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }
      .tac{
        width: 200%;
      }

    }

    .right-box{
      width: 92%;
      height: 100vh;

      .r-top{
        width: 100%;
        height: 1.795rem;
        background: #f0f0f0;
        display: flex;
        justify-content:flex-end;
        .user{
          width: 5.128rem;
          height: 100%;
          margin-right: 150px;
          h3{
            display: inline-block;
          }

          .user-box{
            width: 80px;
            display: inline-block;
            margin-top: 13px;
          }
        }
      }
      .r-b{
        margin: 10px;
      }
    }

  }
  .user{
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>